<template>
  <div class="app-container">
    <div class="container-header" style="height: 50px;">
      <span style="font-size: 18px;color: #666666">服务协议</span>
      <el-button style="float: right;" type="primary" @click="handleUpdate">编辑</el-button>
    </div>
    <div class="container-content">
      <div v-if="content !== undefined" v-html="content"></div>
    </div>
    <el-dialog title="编辑用户服务协议" :visible.sync="open" width="1000px">
      <el-form ref="form" :model="form" :rules="rules" label-width="10px">
        <el-form-item>
<!--          <ueditor v-if="open" :editor-content="form.content"  @updateContent="val => {this.form.content = val;}"/>-->
          <Editor v-model="form.content" style="height: 300px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {getByTypeAgreementConf, updateAgreementConf} from "@/api/system/agreementConf";
import Ueditor from "@/components/UEditor";

export default {
  name: "serviceAgreement",
  components: {Ueditor},
  data(){
    return {
      open:false,
      content:undefined,
      form:{
        content:undefined,
        contentType:'service_agreement',
      },
      rules:{
        content:[
          {required:true,message:'请输入内容',trigger:'blur'}
        ]
      },
    }
  },

  methods:{
    getAgreementConf(){
      getByTypeAgreementConf(this.form.contentType).then(res => {
        this.content = res.data;
        this.form.content = res.data;
      })
    },
    resetForm(){
      this.form.content = undefined;
    },
    handleUpdate(){
      this.resetForm();
      this.open = true;
      this.getAgreementConf();
    },

    submitForm(){
      this.$refs["form"].validate(valid => {
        if(valid){
          updateAgreementConf(this.form).then(res => {
            if(res.code === 200){
              this.$message.success("操作成功");
              this.open = false;
              this.getAgreementConf();
            }else{
              this.$message.error(res.msg);
            }
          })
        }
      })
    },

    updateContent(content){
      this.form.content = content;
    },
  },

  created() {
    this.getAgreementConf();
  },
}
</script>

<style scoped lang="scss">
.container{
  padding: 20px;
  box-sizing: border-box;
  .container-content{
    padding: 0 40px;
    box-sizing: border-box;
  }
}

</style>
